<template>
  <div style="max-width: 1400px; padding: 20px;">
    <el-dialog 
      v-model="dialogVisible" 
      title="详情" 
      width="70%"
    >
      <div>{{ content }}</div>
    </el-dialog>
    
    <!-- 统计卡片区域 -->
    <div class="statistics-container mb-6">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card>
            <el-statistic title="总栋数" :value="10">
              <template #prefix>
                <i class="custom-bg-city"></i>
              </template>
            </el-statistic>
          </el-card>
            <div style="text-align:center; margin-top: 10px;">
              <el-button type="primary" @click="goToKeshihua">可视化大屏</el-button>
            </div>
        </el-col>
        <el-col :span="6">
          <el-card>
            <el-statistic
              group-separator=","
              decimal-separator="."
              :value="value1"
              :title="title"
            >
              <template #prefix>
                <i class="el-icon-s-flag" style="color: red"></i>
              </template>
              <template #suffix>
                <i class="el-icon-s-flag" style="color: blue"></i>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <el-statistic title="总人数":value="1496">
              <template #prefix>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <el-statistic title="租客数":value="639">
              <template #prefix>
                <i class="el-icon-user-solid"></i> 
              </template>
            </el-statistic>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <el-divider></el-divider>


    <!-- 图表和天气区域 -->
    <el-row class="mb-6">
      <el-col :span="16">
        <Charts6 />
      </el-col>
      <el-col :span="8">
        <WordCloud :keywords="keyWordsList" style="height: 300px; width: 100%;" />
      </el-col>
    </el-row>
    
    <el-divider></el-divider>
    
    <!-- 折线图区域 -->
    <div class="mb-6">
      <LineChart />
    </div>
    
    <el-divider></el-divider>
    
    <!-- 底部图表区域 -->
    <el-row>
      <el-col :span="12"><Chatrs4 /></el-col>
      <el-col :span="12"><Charts5 /></el-col>
    </el-row>
  <!-- Charts7 已上移至统计卡片区域下方，避免出现在页面顶部 -->
   <el-row>
     <el-col :span="12">
       <Charts7 />
     </el-col>
    <el-col :span="12">
      <Charts8/>
    </el-col>
   </el-row>
  </div>
</template>

<style>
.statistics-container .el-card {
  margin-bottom: 16px;
}

.chart-container {
  /*display: flex;*/
  justify-content: space-between;
  height: 100%;
}

.el-table .red-row {
  background-color: #ffdddd; /* 浅红色 */
}

.el-table .yellow-row {
  background-color: #ffffcc; /* 浅黄色 */
}

.el-table .green-row {
  background-color: #ddffdd; /* 浅绿色 */
}

.custom-bg-city {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url('../../assets/city.png');
  background-size: cover;
  background-position: center;
}

.mb-6 {
  margin-bottom: 24px;
}
</style>

<script setup>
import { ref, onMounted } from 'vue'
import { post } from '../../utils/axios.js'
import { ElMessage } from 'element-plus'
import Charts8 from "./Charts8.vue"
// 导入组件
import Chatrs4 from "./Chatrs4.vue"
import LineChart from '../comms/Charts.vue'
import QChart from '../comms/Chart3.vue'
import Charts5 from "./Charts5.vue"
import Charts6 from "./Charts6.vue"
import WordCloud from '@/components/Chart/WordCloud.vue'
import { keywords as keywordsData } from '@/data/index'
import Charts7 from "./Charts7.vue"

// 响应式数据
const dialogVisible = ref(false)
const content = ref('')
const like = ref(true)
const value1 = ref(621)
const title = ref('总户数')
const options = ref([
  { value: 'Pending', label: 'Pending' },
  { value: 'Rejected', label: 'Rejected' },
  { value: 'In Progress', label: 'In Progress' },
  { value: 'Resolved', label: 'Resolved' }
])
const searchQuery = ref('')
const selectedCategory = ref('')
const currentPage = ref(1)
const pageSize = ref(5)
const tableData = ref([])

// 跳转到可视化大屏页面
function goToKeshihua() {
  window.open('/src/components/keshihua/index.html', '_blank')
}
// 词云数据适配
const keyWordsList = ref([])
for (const key in keywordsData) {
  keyWordsList.value.push({
    name: key,
    value: keywordsData[key]
  })
}
// 方法定义
function updateRowStatus(index, row) {
  const data = {
    id: row.id,
    complaintStatus: row.complaintStatus,
    content: row.content
  }
  post('/sc/api/complaint/update', data, (res) => {
    if (res.status === 1) {
      ElMessage({ message: '修改成功！', type: 'success' })
    } else {
      ElMessage({ message: '未查询到数据，请重新查询', type: 'error' })
    }
  })
}

function openDetails(row) {
  content.value = row.content
  dialogVisible.value = true
}

function handleSearch(row) {
  const data = {
    complaintStatus: row.complaintStatus,
  }
  post('/sc/complaint/byStatus', data, (res) => {
    if (res.status === 1) {
      ElMessage({ message: '查询成功！', type: 'success' })
      tableData.value = res.data
    } else {
      ElMessage({ message: '未查询到数据，请重新查询', type: 'error' })
    }
  })
}

function tableRowClassName({ row, rowIndex }) {
  const statusColorMap = {
    '1': 'red-row',
    '2': 'yellow-row',
    '3': 'green-row',
  }
  return statusColorMap[row.ComplaintStatus] || ''
}

function handleSizeChange(val) {
  pageSize.value = val
}

function handleCurrentChange(val) {
  currentPage.value = val
}

// 生命周期钩子
onMounted(() => {
  post('/sc/complaint/getAll', {}, (res) => {
    if (res.status === 1) {
      ElMessage({ message: '查询成功！', type: 'success' })
      tableData.value = res.data
    } else {
      ElMessage({ message: '未查询到数据，请重新查询', type: 'error' })
    }
  })
})
</script>
